<template>
	<view>

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>渠道转化统计</text>
			</view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop">
			<view class="searchBox">
				<uni-datetime-picker v-model="timeRange" type="daterange" @change="confirmTime" :clearIcon="false" />
			</view>
		</u-sticky>
		<view id="test"></view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="customerItem" v-for="(item,index) in list" :key="index">
				<view class="text-line">
					<text class="text-name">渠道:</text>
					<text class="text-value">{{item.memberType|customerType}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">访问客户数:</text>
					<text class="text-value">{{item.enterpriseName|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">转化成功数:</text>
					<text class="text-value">{{item.contactPhone|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">转化率:</text>
					<text class="text-value">{{item.memberSource|memberSource}}</text>
				</view>

			</view>
		</mescroll-body>

		

	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as customerApi from '@/api/cutomer-api.js'
	import moment from '@/utils/moment.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				offsetTop: 0,
				show: false,
				list: [],
				timeRange: [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
				today: moment().format('YYYY-MM-DD'),

			};
		},

		onLoad(option) {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;
		},
		methods: {
			upCallback(page) {

				const params = {
					pageNum: page.num,
					pageSize: page.size,
					startTime: this.timeRange[0],
					endTime: this.timeRange[1]
				}
				customerApi.memberList(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},


			confirmTime(e) {
				this.show = false;
				this.timeRange = e;
				this.mescroll.triggerDownScroll();
			}


		}
	};
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

		.city {
			font-size: 28rpx;
			color: #fff;
			margin-right: 8rpx;
		}

		.search {
	
			padding: 20rpx;
			margin: 0 20rpx;
			// height: 60upx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// font-size: 24upx;
			// background-color: #ffffff;
			// border-radius: 30rpx;
		}
	}

	.customerItem {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 24rpx;
		color: #666;
		font-size: 28rpx;
	}
</style>